<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS注册事件的第二种方式</title>
</head>

<body>
    <input type="button" value="hello" id="hellobtn">
    <script>
        // 定义一个函数 
        function sum() {
            console.log("sum function invoke!")
        }
        // 根据id获取button取对象
        var hellobtnElt = document.getElementById("hellobtn");
        // 元素中有什么属性,就能"点"什么
        // 这行代码在页面打开的时候会执行,这行代码执行的意义是:将sum这个回调函数绑定到hellobtn的 click事件上
        // 这个回调函数sum在什么时候执行？ click事件发生之后才会被监听器调用!
        hellobtnElt.onclick = sum //不要这样写: hellobtnElt.onclick=sum()

        // 回调函数可以是一个匿名函数
        // 这行代码的执行只是完成事件click的注册,给click事件注册一个回调函数
        // 这行代码执行的时候，回调函数并不会被执行
        // 只有当这个按钮发生click事件之后，这个回调函数会自动被监听器来调用
        hellobtnElt.onclick = function() {
            console.log("我是一个回调函数，同时是个匿名函数！")
        }
    </script>
</body>

</html>